<template>
	<view style="min-height: 100vh;position: relative;background-color: #f2f2f2;">
		<u-navbar :title='title'  left-icon-color="white" :titleStyle="{'color':'white'}" bgColor="#13989a" :autoBack="true"  
			:placeholder="true"></u-navbar>
		<image src="https://renovationcdn.jiachuangnet.com/mine/mineHeader.jpg" class='bg' style=""></image>
		<view class="container" style="padding-bottom: 200rpx;">
			<view class="floor ">
				<view class="uni-margin-wrap" v-if="problemImgArr.length">
					<swiper class="swiper" circular :indicator-dots="false" :autoplay="true"
						:interval="2000" :duration="500">
						<swiper-item v-for="(url,i) in problemImgArr" :key="i">
							<image @click="viewImage(url,problemImgArr)" :src="'http://'+url" mode="" style="width: 100%;height: 300rpx;" ></image>
						</swiper-item>
					</swiper>
				</view>

				<view class="form">
					<text class="lable">巡查人：</text>
					<text class="value">{{approvalDetails.patrolUserName}}</text>
				</view>
				<view class="form">
					<text class="lable">整改意见：</text>
					<text class="value" v-if="msg.correctionRemark">{{msg.correctionRemark}}</text>
				</view>
				<view class="form">
					<text class="lable">时间：</text>
					<text class="value">{{approvalDetails.createTime}}</text>
				</view>
				<view>
				</view>
			</view>
			<view class="floor" style="font-size: 24rpx;color: #a1a1a1;margin-top: 20rpx;" >
				<view class="title">
					问题
				</view>
				<view class="flex" style="margin: 10rpx 0;color: #5f5f5f;align-items: center;">
					<view>
						<text style="color: #f25f41;font-size: 30rpx;">{{`-${msg.problemScore}.0分`}}</text>
					</view>
					<view style="height: 50rpx;width: 1rpx;background-color: #f3f3f3;margin: 0 20rpx;">
					</view>
					<view>
						<text>{{msg.templateName}}</text>
					</view>
				</view>
				<view
					style="font-size: 28rpx;color: #5f5f5f;padding: 30rpx;background-color:#f7f7f7;border-radius: 10rpx;">
					<view style="width: 120rpx;">
						<u-tag :text="`-${msg.problemScore}.0分`" size="mini"></u-tag>
					</view>
					{{msg.problemName}}
				</view>

			</view>
			<view class="floor">
				<view class="title" style="font-size: 30rpx;font-weight: 700;">
					基础信息
				</view>
				<view class="form">
					<text class="lable">门店：</text>
					<text class="value">{{approvalDetails.assignName}}</text>
				</view>
				<view class="form">
					<text class="lable">所属区域：</text>
					<text class="value">{{approvalDetails.warehouseName}}</text>
				</view>
				<view class="form">
					<text class="lable">巡查人：</text>
					<text class="value">{{approvalDetails.patrolUserName}}</text>
				</view>
				<view class="form">
					<text class="lable">生成日期：</text>
					<text class="value">{{approvalDetails.createTime}}</text>
				</view>
				<view class="form">
					<text class="lable">整改人：</text>
					<text class="value">{{approvalDetails.storeStaffName}}</text>
				</view>
				<!-- <view class="form">
					<text class="lable">一级审核：</text>
					<text class="value">{{approvalDetails.patrolUserName}}</text>
				</view> -->
			</view>

			<view class="footer" v-if="(isCorrection==1)&&[9].includes(loginType)">
				<view style="background-color: #fff;padding: 10rpx 20rpx;" >
					<u-button shape="circle" color='#13989a' @click="toPathC('todo/form')">整改</u-button>
				</view>
			</view>
			<view class="footer" v-if="(isCorrection==2)&&[7,8].includes(loginType)">
				<view style="background-color: #fff;padding: 10rpx 20rpx;display: flex;" >
					<view class="" style="margin: 0 10rpx;flex: 1;">
						<u-button shape="circle" color='#fd5e34' @click="passHandler(1)">不通过</u-button>
					</view>
					<view class="" style="margin: 0 10rpx;flex: 1;">
						<u-button shape="circle" color='#13989a' @click="passHandler(0)">通过</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="passShow" @close="passShow=false" round="10" mode="bottom">
			<view class="overdueForm" style="padding: 20rpx;">
				<view style="text-align: center;font-size: 30rpx;margin-bottom: 50rpx;">
					审核意见-{{passHandlerFlag?'【通过】':'【不通过】'}}
				</view>
				<view class="floor" style="background-color: #f2f2f2;">
					<view class="title" style="margin-bottom: 20rpx;">
						审核意见
					</view>
					<u--textarea v-model="rejectRemark" :count='true' placeholder="请输入审核意见"></u--textarea>
				</view>
				<view style="background-color: #fff;padding: 10rpx 20rpx;display: flex;" >
					<view class="" style="margin: 0 10rpx;flex: 1;">
						<u-button shape="circle" color='#fd5e34' @click="passShow=false">取消</u-button>
					</view>
					<view class="" style="margin: 0 10rpx;flex: 1;">
						<u-button shape="circle" color='#13989a' @click="passFn">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				loginType:null,
				passShow:false,
				passHandlerFlag:0,
				recordDetailsId: 0,
				patrolRecordId: 0,
				approvalDetails: 0,
				msg: null,
				problemImgArr:[],
				isCorrection:0 ,////0 全部 1 待整改 2 待审核 3 已完成
				rejectRemark:''
			}
		},
		onLoad(option) {
			this.loginType=uni.getStorageSync('loginType')
			if (option.obj) {
				this.msg = JSON.parse(option.obj)
				this.recordDetailsId = this.msg.recordDetailsId
				this.patrolRecordId = option.patrolRecordId
				this.problemImgArr=this.msg.correctionImg?this.msg.correctionImg.split(','):[]
				uni.$u.http.get('/patrol/getRectificationApprovalDetails', {
					params: {
						patrolRecordId: this.patrolRecordId
					}
				}).then(res => {
					if (res) {
						this.approvalDetails = res
					}
				})
				this.isCorrection=option.isCorrection
				this.getCorrectionRecordVo()
			}
			if(option.last){
				this.last=option.last
			}
		},
		computed:{
			title(){
				let map=['全部','待整改','待审核','已完成']
				 ////0 全部 1 待整改 2 待审核 3 已完成
				return map[this.isCorrection]
				
			}
		},
		methods: {
			viewImage(listIndex,list) {
				let imageList= list.map(item=>'http://'+item)
				uni.previewImage({
					current: listIndex,
					urls: imageList,
					longPressActions: {
						itemList: ['保存图片'],
						success: data => {
							uni.closePreviewImage()
							/* 保存图片到系统相册 */
							if (data.tapIndex == 0) {
								uni.getImageInfo({
									src: imageList[listIndex],
									success: function(res) {
										console.log(res)
										uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
											filePath: res.path, //图片文件路径
											success: function() {
												uni.showToast({
													title: '图片保存成功',
													icon: 'none',
												});
											},
											fail: function(e) {
												console.log(e);
												uni.showToast({
													title: '图片保存失败',
													icon: 'none',
												});
											},
										});
									},
									fail: function(e) {
										console.log(e);
										uni.closePreviewImage()
										uni.showToast({
											title: '图片保存失败',
											icon: 'none',
										});
									},
								})
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getCorrectionRecordVo(){
				uni.$u.http.get('/patrol/getCorrectionRecordVo',{
					params:{
						recordDetailsId:this.recordDetailsId
					}
				})
			},
			passFn(){
				uni.$u.http.post('/patrol/updateIsCorrection', {
					recordDetailsId:this.recordDetailsId,
					correctionId:this.msg.correctionId,
					examineState:this.passHandlerFlag+1,
					rejectRemark:this.rejectRemark,
					 last:this.last
				}).then(res=>{
					if(res){
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							mask: true,
							complete: () => {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							}
						});
						
					}
				})
			},
			passHandler(flag){
				this.passHandlerFlag=flag
				this.passShow=true
			},
			toPathC(url) {
				uni.navigateTo({
					url: `/packageC/pages/${url}?recordDetailsId=${this.recordDetailsId}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 150rpx;
		background-color: #ffffff;
	}

	.form {
		margin: 10rpx 0;
		font-size: 24rpx;

		.lable {
			color: #818181;
			margin-right: 50rpx;
		}

		.value {
			color: #636363;
		}
	}

	.container {
		width: 92vw;
		padding: 30rpx;
		z-index: 10;
		position: absolute;
		top: 320rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.bg {
		width: 750rpx;
		height: 430rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.workItem {
		font-size: 24rpx;
		width: 100rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.floor {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.title {
			font-weight: 600;
			font-size: 30rpx;
		}
	}
</style>